<script setup>
import handleDrawer from '@/table1/components/handleDrawer.vue'
import { getList, delRow } from '@/api/table.js'
const { proxy } = getCurrentInstance() // 获取当前组件实例
import { ElMessageBox } from 'element-plus'
const modalForm = useTemplateRef('modalForm')
const tableData = ref([])
const queryParam = ref({})

// 详情
const details = () => {
  tableData.value[0].column5 = '张三'
  tableData.value[1].column5 = '刘老六'
}
// 删除
const del = id => {
  ElMessageBox.confirm(
    '确定删除该数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    delRow({ id }).then(res => {
      if (res.status === 0) {
        proxy.$msgSuccess(res.message)
          loadData()
      } else {
        proxy.$msgWarning(res.message)
      }
    })
  })
}
// 新增
const add = title => {
  modalForm.value.add(title)
}
// 编辑
const edit = (title, rowData) => {
  modalForm.value.edit(title, rowData)
}
// 加载数据
const loadData = (p = {}) => {
  console.log('参数', p)
  const param = {
    pageSize: 10,
    pageNum: 1,
    ...p
  }
  getList(param).then(res => {
    console.log('列表结果', res)
    if (res.status === 0) {
      tableData.value = res.data.list || []
      // proxy.$msgInfo(res.message)
    } else {
      proxy.$msgWarning(res.message)
    }
  })
}
// 新增/编辑 完成
const modalFormOk = () => {
  // 重新加载数据
  loadData()
}
// 查询
const select = () => {
  loadData({ column1: queryParam.value.column1 })
}

onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="flex">
    列1：<el-input v-model="queryParam.column1" placeholder="请输入" clearable />
    <el-button type="success" @click="select">查询</el-button>
    <el-button type="primary" @click="add('新增')">新增</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed="left" prop="column1" label="列1" width="150" />
    <el-table-column fixed="left" prop="column2" label="列2" width="120" />
    <el-table-column prop="column3" label="列3" width="120" />
    <el-table-column prop="column4" label="列4" width="200" />
    <el-table-column prop="column5" label="列5" min-width="600" />
    <el-table-column fixed="right" label="Operations" width="180">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="details()">详情</el-button>
        <el-button link type="primary" size="small" @click="edit('编辑', scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <handleDrawer ref="modalForm" @ok="modalFormOk" />
</template>

<style scoped>
.flex{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.el-input{
  margin-right: 10px;
  width: 200px;
}
</style>
